<!--
 * @Autor: Gct
 * @Description: 
 * @Date: 2022-04-13 21:09:38
 * @LastEditors: Gct
 * @LastEditTime: 2022-04-14 15:53:11
-->
<template>
  <div>
    <!-- 标签选项卡开始 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
      <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
      <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
      <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
      <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
      <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
      <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
    </el-tabs>
    <!-- 标签选项卡结束 -->
    <!-- 表格开始 -->
    <el-table :data="orderList" style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间">
        <template slot-scope="scope">
          {{ scope.row.orderTime | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价" width="180"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '待接单'" type="success">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status === '待派单'" type="warning">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" width="180">
      </el-table-column>
      <el-table-column
        v-if="activeName != '待支付' && activeName != '待派单'"
        prop="employeeId"
        label="员工ID"
      >
        <template slot-scope="scope">
          {{ scope.row.employeeId || "--" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="toDetails(scope.row)">详情</el-button>
          <el-button
            @click="toSend(scope.row.id)"
            v-if="scope.row.status === '待派单'"
            type="text"
            >派单</el-button
          >
          <el-button
            @click="cancelSend(scope.row.id)"
            v-if="scope.row.status === '待接单'"
            type="text"
            >取消派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 6, 8, 15, 30, 60]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <div class="radio-div" v-for="item in employeeLists" :key="item.id">
        <el-radio v-model="form.waiterId" :label="item.id" border
          >{{ item.username }}{{ item.realname }}</el-radio
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>
<script>
import { pageQuery, sendOrder, cancelSendOrder } from "@/api/order";
import { pageQueryYm } from "@/api/user.js";
export default {
  data() {
    return {
      // 默认激发的选项卡的属性
      activeName: "所有订单",
      // 订单数据
      orderList: [],
      // 订单数据总条数
      total: 0,
      params: {
        page: 1,
        pageSize: 6,
      },
      // 控制模态框显示与隐藏
      visible: false,
      // 保存所有员工信息
      employeeLists: [],
      // 派单的表单对象
      form: {},
    };
  },
  created() {
    this.handleClick();
  },
  methods: {
    /**
     * @description: 选项卡切换触发的事件
     * @param {*} tab
     * @param {*} event
     * @return {*}
     * @author: Gct
     */
    async handleClick() {
      let temp = { ...this.params };
      if (this.activeName != "所有订单") {
        temp.status = this.activeName;
      }
      let res = await pageQuery(temp);
      this.orderList = res.data.list;
      this.total = res.data.total;
    },

    /**
     * @description: 页码条数发生改变触发的事件
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.page = 1;
      this.handleClick();
    },

    /**
     * @description: 页码发生改变触发的事件
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    handleCurrentChange(page) {
      this.params.page = page;
      this.handleClick();
    },

    /**
     * @description:
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    toDetails(row) {
      this.$router.push({
        path: "/toDetails/index",
        query: row,
      });
    },

    /**
     * @description: 派单
     * @param {id} 是当前行的订单id
     * @return {*}
     * @author: Gct
     */
    async toSend(id) {
      this.visible = true;
      // 拿到所有员工的信息--发送查询请求
      let res = await pageQueryYm({
        page: 1,
        pageSize: 1000,
        roleId: 1,
      });
      this.employeeLists = res.data.list;
      this.form.orderId = id;
    },

    /**
     * @description: 保存订单，发送派单请求
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    async toSubmit() {
      let res = await sendOrder(this.form);
      this.$notify({
        type: "success",
        message: res.message,
      });
      // 重载数据
      this.handleClick();
      // 关闭模态框
      this.visible = false;
    },

    /**
     * @description: 取消派单
     * @param {*}
     * @return {*}
     * @author: Gct
     */
    cancelSend(id) {
      // 发送取消订单的请求
      this.$confirm("此操作将取消派单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 确认取消
          let res = await cancelSendOrder({ orderId: id });
          this.$notify({
            type: "success",
            message: res.message,
          });
          // 重载数据
          this.handleClick();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "操作已取消",
          });
        });
    },
  },
};
</script>
<style lang="scss">
// 员工单选框按钮
.radio-div {
  display: inline-block;
  margin: 10px;
}
</style>